import Taro, { useState, useMemo, useEffect, useRouter, useDidShow } from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import Pdf from '../_components/PdfRender';
import './styles.less';

const Show = (props) => {
  const { orderId, isAssigned, isNonePlatform, isCodeScanning } = props;

  const [url, setUrl] = useState();

  const [loading, setLoading] = useState(true);
  const [loadingContent, setLoadingContent] = useState('');

  const getPdfUrl = (o_id) => {
    /* TODO: 此处增加获取pdf url的代码 */
    setUrl(null);
  };

  useDidShow(() => {
    setLoadingContent('获取合同中');
    getPdfUrl(orderId);
  });

  const handleClick = () => {
    isAssigned ? navigateToPay() : navigateToSign();
  };

  // 前往签署
  const navigateToSign = () => {
    // 重置pdf渲染组件
    setUrl(null);

    /* TODO: 跳转签署页面路径 canvasBoard */
  };

  // 前往支付
  const navigateToPay = () => {
    // 重置pdf渲染组件
    setUrl(null);
    Taro.showLoading({ title: '加载中' });

    /* TODO: 此处增加签署完成后的跳转逻辑 */
    return;
  };

  if (loading) {
    return null;
  }

  return (
    <div className={`payWrap payArtWrap`}>
      <div className="pdfWrap">
        {url ? <Pdf src={url} /> : null}
        <div style={{ width: '100%', height: '60px' }}></div>
      </div>

      <div className="btnWrap" style={{ bottom: '20px' }}>
        <button onClick={() => handleClick()} className="btn">
          {!isAssigned ? '确认签署' : isNonePlatform ? '确认已签署' : '确认支付'}
        </button>
      </div>
    </div>
  );
};

export default connect(({ order }) => ({ ...order }))(Show);
